<template>
  <el-tabs v-model="activeName">
    <el-tab-pane v-if="curComponent" label="组件属性" name="attr">
      <component :is="curComponentAttr" />
    </el-tab-pane>
    <el-tab-pane label="页面属性" name="page">
      <CanvasAttr />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { mapState } from 'vuex'
import CanvasAttr from '@/components/CanvasAttr.vue'
import { areaTypeComponent } from '@/custom-component/component-list'

export default {
  name: 'AttributeManage',
  components: { CanvasAttr },
  data() {
    return {
      activeName: 'page',
    }
  },
  computed: {
    ...mapState(['curComponent']),
    curComponentAttr() {
      return `${areaTypeComponent[this.curComponent.type]}Attr`
    },
  },
  watch: {
    curComponent(val) {
      if (!val) {
        this.activeName = 'page'
      } else {
        this.activeName = 'attr'
      }
    },
  },
}
</script>

<style scoped lang="scss"></style>
